@extends('layouts.app')

@section('content')

    <div class="container mx-auto mt-10 flex">
        <div class=" w-full mt-4 lg:w-2/3">
            <div class="card  bg-base-100 justify-center shadow-xl flex items-center pt-3 ">
                <figure><img src="/{{ $book->cover }}" alt="Shoes"/></figure>
                <div class="card-body text-center">
                    <h2 class="text-2xl">{{ $book->title }}</h2>

                    <div class="text-md">作者 <span class="text-blue-700">{{ $book->author }}</span></div>
                    <div class="text-md">出版社 <span class="text-blue-700">{{ $book->publisher }}</span></div>


                    <div class="flex justify-center">
                        <a href="/book/{{ $book->id }}/borrow" class="btn btn-primary btn-sm">借阅本书</a>
                    </div>

                </div>
            </div>

            <div class="card  bg-base-100  shadow-xl   pt-3 mt-6">


                <div class="p-4">

                    <button class="btn btn-primary btn-sm mb-6">本书详情</button>

                    <div style="width: 100%">
                        {!! $book->description !!}
                    </div>
                </div>
            </div>
        </div>


        <div class=" w-1/3 p-4 hidden lg:block">
            <div class="card  bg-base-100 justify-center shadow-xl flex items-center p-4 ">

                <div class="text-left">
                    <button class="btn btn-primary btn-sm mb-6">本书评价</button>
                </div>

                <div class="w-full " style="height: 500px;overflow: auto">
                    @foreach($bookComment as $item)
                        <div class="chat w-full
                    @if($item->user_id == auth()->id())
                    chat-end
                    @else
                    chat-start
                    @endif

                    ">
                            <div class="chat-image avatar">
                                <div class="w-10 rounded-full">
                                    <img
                                        src="https://ui-avatars.com/api/?name={{ $item->user->nickname }}"/>
                                </div>
                            </div>
                            <div class="chat-header">
                                {{ $item->user->nickname }}
                                <time class="text-xs opacity-50">{{ $item->created_at->diffforHumans() }}</time>
                            </div>
                            <div class="chat-bubble">{{ $item->content }}</div>
                        </div>
                    @endforeach

                </div>

            </div>

            <div class="card  bg-base-100 justify-center shadow-xl flex items-center px-4 py-2 mt-2">

                <form action="/postBookComment" class="w-full " method="post">
                    <div class=" flex flex-col ">
                        @csrf
                        <input type="hidden" name="book_id" value="{{ $book->id }}">
                        <textarea required name="content" class="textarea rounded-0 textarea-primary" placeholder="畅所欲言吧！！！"></textarea>
                        <button class="btn btn-primary btn-sm mt-2">发布</button>
                    </div>

                </form>
            </div>

        </div>


    </div>

@endsection
